<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生ajax</title>
  <style>
    .category {
      float: left;
      margin-left: 2em;
    }
  </style>
  <script>
    // ajax技术
    // 1、创建一个请求对象
    var request = new XMLHttpRequest()
    // console.log(request)
    // 2、打开链接
    // request.open("get", 'http://localhost:8888/index/carousel/findAll')
    request.open("get", 'http://localhost:8888/index/category/findAll')
    // 3、设置请求的头部
    request.setRequestHeader("Content-Type", "application/json")
    // request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
    // 4、发送一个请求
    request.send();
    // 设置响应的数据类型
    request.responseType = 'json'
    // 5、接收响应并且拿到返回给浏览器的数据
    request.onreadystatechange = function () {
      if (request.readyState === 4) {
        if (request.status === 200) {
          // 获取到的数据
          // console.log(request.response);
          var div = document.getElementById('div1')
          // console.log(div)
          var ul = div.firstElementChild;
          // console.log(ul)
          var data = request.response.data
          // console.log(data)
          data.forEach(function (item) {
            // console.log(item)
            var li = document.createElement('li');
            // console.log(item.url)
            // li.innerHTML = `
            // <img src="${item.url}" alt="图片加载失败">
            // `
            li.innerHTML = `
            <a>${item.name}</a>
            `
            li.className = "category"
            ul.appendChild(li)
          })
        } else {
          console.log("请求失败", request);
        }
      }
    }

  </script>
</head>

<body>
  <div id="div1">
    <ul>

    </ul>
  </div>
</body>

</html>